<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<movable-area
		class="pure-float-bubble"
		:class="_classes"
		:style="_styles"
		:scale-area="scaleArea"
		v-if="_show"
	>
		<movable-view
			class="pure-float-bubble__movable-view"
			:direction="direction"
			:inertia="inertia"
			:out-of-bounds="outOfBounds"
			:damping="damping"
			:friction="friction"
			:disabled="disabled"
			:scale="scale"
			:scale-min="scaleMin"
			:scale-max="scaleMax"
			:scale-value="scaleValue"
			:animation="animation"
			:x="_x"
			:y="_y"
			:width="width"
			:height="height"
			@tap="_handleClick"
			@change="_handleChange"
			@scale="_handleScale"
			:hover-class="hoverClass"
		>
			<slot>
				<view
					class="pure-float-bubble__icon"
					v-if="iconName"
				>
					<pure-icon :name="iconName"></pure-icon>
				</view>
				<view
					class="pure-float-bubble__text"
					v-if="text"
				>
					{{ text }}
				</view>
			</slot>
		</movable-view>
	</movable-area>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, nextTick, onMounted, watch } from "vue";
	import props from "./props";
	import { delay } from "@/uni_modules/pure-utils";

	// -------------------------------------------------------------------------------- Refs
	const _show = ref(false);
	const _x = ref(0);
	const _y = ref(0);

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick", "onChange", "onScale"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];
		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 宽度
		if (_props.width) {
			array.push(`--pure-float-bubble-width: ${_props.width}`);
		}

		// 高度
		if (_props.height) {
			array.push(`--pure-float-bubble-height: ${_props.height}`);
		}

		// Left
		if (_props.left) {
			array.push(`--pure-float-bubble-left: ${_props.left}`);
		}

		// Right
		if (_props.right) {
			array.push(`--pure-float-bubble-right: ${_props.right}`);
		}

		// Top
		if (_props.top) {
			array.push(`--pure-float-bubble-top: ${_props.top}`);
		}

		// Bottom
		if (_props.bottom) {
			array.push(`--pure-float-bubble-bottom: ${_props.bottom}`);
		}

		return array;
	});

	// 方向变化后重新初始化
	watch(
		() => _props.direction,
		async () => {
			_init();
		}
	);

	// 点击事件
	function _handleClick() {
		_emits("onClick");
	}

	// 变化事件
	function _handleChange(e) {
		_emits("onChange", e);
	}

	// 缩放事件
	function _handleScale(e) {
		_emits("onScale", e);
	}

	// 初始化
	async function _init() {
		_show.value = false;
		await nextTick();
		await delay(10);
		_show.value = true;
	}

	// **************************************************************************************************************
	// * 生命周期
	// **************************************************************************************************************
	onMounted(async () => {
		_init();
	});
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
